import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

import { increment } from "../redux/actions/count";

export default function News() {
  const [news, setNews] = useState([]);
  const { number } = useSelector(state => state.count);
  const dispatch = useDispatch();
  useEffect(() => {
    setNews([
      {
        title: "News 1",
        content: "dsa d ad",
      },
      {
        title: "News 2",
        content: "asdada sad sa das ",
      },
      {
        title: "News 3",
        content: "adsad adas as",
      },
      {
        title: "News 4",
        content: "asdasd ad sa sad",
      },
    ]);
  }, []);

  return (
    <div>
      <div>{number}</div>
      <button type="button" onClick={() => dispatch(increment(1))}>
        add 1
      </button>
      {news.map(n => (
        <div key={n.title}>
          <h1>{n.title}</h1>
          <p>{n.content}</p>
        </div>
      ))}
    </div>
  );
}
